<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-textarea"
		:class="_classes"
		:style="_styles"
	>
		<textarea
			class="pure-textarea__textarea"
			:value="modelValue"
			:placeholder="placeholder"
			:placeholder-style="placeholderStyle"
			:placeholder-class="placeholderClass"
			:maxlength="maxlength"
			:focus="focus"
			:auto-focus="autoFocus"
			:auto-height="autoHeight"
			:fixed="fixed"
			:cursor-spacing="cursorSpacing"
			:cursor="cursor"
			:cursor-color="cursorColor"
			:confirm-type="confirmType"
			:confirm-hold="confirmHold"
			:show-confirm-bar="showConfirmBar"
			:selection-start="selectionStart"
			:selection-end="selectionEnd"
			:adjust-position="adjustPosition"
			:disable-default-padding="disableDefaultPadding"
			:hold-keyboard="holdKeyboard"
			:auto-blur="autoBlur"
			:ignoreCompositionEvent="ignoreCompositionEvent"
			:inputmode="inputmode"
			@focus="_onFocus"
			@input="_onInput"
			@blur="_onBlur"
			@confirm="_onConfirm"
			@keyboardheightchange="_onKeyboardheightchange"
			@linechange="_onLinechange"
		/>
		<view
			class="pure-textarea__footer"
			v-if="$slots.footer || total || clearable"
		>
			<slot name="footer"> </slot>
			<view
				class="pure-textarea__clear"
				v-if="clearable && _total > 0"
				@tap="_handleClear"
			>
				{{ clearText }}
			</view>
			<view
				class="pure-textarea__footer__gap-line"
				v-if="clearable && _total > 0"
			></view>
			<view
				class="pure-textarea__total"
				v-if="total"
			>
				{{ _total }}
				<text class="pure-textarea__total__separator">{{ separator }}</text>
				{{ _max }}
			</view>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, inject, useAttrs, watch } from "vue";
	import props from "./props";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Injects
	const PureFormItemOnBlur = inject("PureFormItemOnBlur", null);
	const PureFormItemOnChange = inject("PureFormItemOnChange", null);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits([
		"onInput",
		"onFocus",
		"onBlur",
		"onConfirm",
		"onKeyboardHeightChange",
		"update:modelValue",
		"onClear",
		"onLineChange"
	]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 禁用
		if (_props.disabled) array.push("pure-textarea--disabled");

		// 只读
		if (_props.readonly) array.push("pure-textarea--readonly");

		// 自动高度
		if (_props.autoHeight) array.push("pure-textarea--auto-height");

		// 聚焦时边框类型
		if (_props.focusType) array.push(`pure-textarea--focus-type--${_props.focusType}`);

		// 聚焦边框颜色
		if (_props.focusBorderColor) array.push(`--pure-textarea-focus-border-color: ${_props.focusBorderColor}`);

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 宽
		if (_props.width) array.push(`--pure-textarea-width: ${_props.width}`);

		// 高
		if (_props.height) array.push(`--pure-textarea-height: ${_props.height}`);

		// 最大高度
		if (_props.maxHeight) array.push(`--pure-textarea-max-height: ${_props.maxHeight}`);

		return array;
	});

	// 当前字数
	const _total = computed(() => {
		return _props.modelValue?.length || 0;
	});

	// 总字数
	const _max = computed(() => {
		if (_props?.maxlength === undefined || _props?.maxlength === null) return 140;
		if (_props?.maxlength === -1) return "字";
		return _props?.maxlength;
	});

	// 监听内容，变化后向表单通知事件
	watch(
		() => _props.modelValue,
		(value) => {
			PureFormItemOnChange?.(value);
		}
	);

	// 获取焦点事件
	function _onFocus(e) {
		_emits("onFocus", e);
	}

	// 失去焦点事件
	function _onBlur(e) {
		_emits("onBlur", e);
		PureFormItemOnBlur?.();
	}

	// 输入事件
	function _onInput(e) {
		const value = _formatValue(e.detail.value);
		_emits("update:modelValue", value);
		_emits("onInput", e);
	}

	// 确认事件
	function _onConfirm(e) {
		_emits("onConfirm", e);
	}

	// 键盘高度变化事件
	function _onKeyboardheightchange(e) {
		_emits("onKeyboardHeightChange", e);
	}

	// 换行事件
	function _onLinechange(e) {
		_emits("onLineChange", e);
	}

	// 格式化值
	function _formatValue(value) {
		return value;
	}

	// 清空
	function _handleClear() {
		_emits("update:modelValue", "");
		_emits("onClear");
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
